<template>
  <div>
    <h1>布局容器</h1>
    <el-container direction="vertical">
      <el-header>Header1</el-header>
      <el-main>主题内容Main</el-main>
    </el-container><br /><br/>

    <el-container>
      <el-header>Header2</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container><br /><br />

    <el-container>
      <el-aside width="200px">Aside3</el-aside>
      <el-main>Main</el-main>
    </el-container><br /><br />

    <el-container>
      <el-header>Header4</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container><br /><br />

    <el-container>
      <el-header height="200px">Header5</el-header>
      <el-container>
        <el-aside width="300px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer >Footer</el-footer>
        </el-container>
      </el-container>
    </el-container><br /><br />

    <el-container>
      <el-aside width="200px">Aside6</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container><br /><br />

    <el-container>
      <el-aside width="200px">Aside7</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container><br /><br />
  </div>
</template>

<script>
   export default {
     name: "Container",
   }
</script>

<style>
  .el-header, .el-footer {
      background-color: greenyellow; /*#B3C0D1 */
      color: red;
      text-align: center;
      line-height: 200px;    /* 内容乡下的距离*/
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #42B983;/* 背景颜色：E9EEF3 */
      color: red; /* 主题中内容的颜色#333*/
      text-align: center;  /* 主题中文本的排布方式，有左left,居中center,右right*/
      line-height: 200px; /* 主题的高度160px*/
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
</style>
